<template>
  <div class="message">
    <div class="messageList">
      <h1>反馈消息一栏(收件箱)</h1>
      <el-radio v-model="radio" label="1">收件箱</el-radio>
      <el-radio v-model="radio" label="2">已发送</el-radio>
      <el-table
          border
          :data="tableData"
          stripe
          style="width: 100%">
        <el-table-column
            prop="messageStatus"
            label="消息状态"
            width="180">
        </el-table-column>
        <el-table-column
            prop="postPerson"
            label="发送者"
            width="180">
        </el-table-column>
        <el-table-column
            prop="content"
            label="正文">
        </el-table-column>
        <el-table-column
            prop="updateTime"
            label="更新时间">
        </el-table-column>
        <el-table-column
            prop="taskNum"
            label="相关任务号">
        </el-table-column>
        <el-table-column
            prop="status"
            label="当前状态">
        </el-table-column>
        <el-table-column
            prop="address"
            label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="editorMessage">
      <h1>通知或回复反馈</h1>
      <span>发给：</span><el-input v-model="input" placeholder="请输入内容"></el-input>
      相关任务编号：<el-input v-model="input" placeholder="请输入内容"></el-input><br>
      <div class="message__content clearfix">
        <span class="left">消息正文： </span>
        <el-input type="textarea" v-model="messageContent"></el-input>
      </div>
      <el-button type="primary">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name:'index',
  data(){
    return{
      radio:'1',
      userType: '',
      userName:'',
      messageContent:'',
      tableData: [{
        messageStatus:'已接收',
        postPerson:'小黑',
        content:'zhengwen',
        updateTime:'2021-07-31 19:58:25',
        taskNum:'sdas',
        status:'未看看'
      },{
        messageStatus:'已接收',
        postPerson:'小黑',
        content:'zhengwen',
        updateTime:'2021-07-31 19:58:25',
        taskNum:'sdas',
        status:'未看看'
      },{
        messageStatus:'已接收',
        postPerson:'小黑',
        content:'zhengwen',
        updateTime:'2021-07-31 19:58:25',
        taskNum:'sdas',
        status:'未看看'
      }],
    }
  },
  methods:{
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
};
</script>

<style scoped lang='scss'>
.message {
  .messageList {
    .el-table{
      margin-top: 20px;
    }
    /deep/ .el-table__header .is-leaf{
      color: black;
      font-weight: bold;
      background-color: #e3e4e5;
      text-align: center;
    }
    /deep/ .el-table--enable-row-transition .el-table__body td{
      text-align: center;
    }
  }
  .editorMessage{
    margin-top: 50px;
    span{
      display: inline-block;
      width: 100px;
    }
    .el-input{
      width: 196px!important;
      margin-right: 50px;
    }
    span{
      width: 80px;
      text-align: right;
    }
    .message__content{
      margin-top: 30px;
      .el-textarea{
        width: 1380px;
      }
      /deep/ .el-textarea__inner{
        height: 100px!important;
      }
    }
    /deep/ .el-button--primary{
      position: relative;
      left: 50%;
      margin-top: 20px;
    }
  }

}
</style>



